<template>
  <div>
    <el-card shadow="never" class="border-0">
      <!-- 搜索 -->
      <Search v-show="false" :model="searchForm" @search="toSearch(searchForm.jobGroupName)" @reset="resetSearchForm">
        <SearchItem :label="proxy.$t('任务组')">
          <el-input v-model="searchForm.jobGroupName" placeholder="请输入任务组名称" clearable style="width: 80%;"
            @keyup.enter="initData"></el-input>
        </SearchItem>
      </Search>
      <!-- 新增|刷新 -->
      <div class="flex items-center justify-between mb-4">
        <div>
          <el-button type="primary" size="small" @click="handleCreate">{{ $t('新增') }}</el-button>
          <el-select v-model="selectedOption" placeholder="请选择时间任务类型" @change="handleChange" class="ml-10">
            <el-option v-for="option in jobTypes" :key="option.value" :value="option.value"
              :label="option.label"></el-option>
          </el-select>
        </div>

        <div>
          <el-tooltip effect="dark" content="刷新数据" placement="top">
            <el-button size="small" text @click="initData">
              <el-icon :size="15">
                <Refresh />
              </el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="导出数据" placement="top">
            <el-button size="small" text @click="handleExportNow">
              <el-icon :size="15">
                <Download />
              </el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
      <!-- </ListHeader> -->
      <template v-if="showTable && selectedOption === 'Cron'">
        <el-table ref="multipleTableRef" :data="tableCronData" stripe style="width: 100%" v-loading="loading">
          <el-table-column :label="proxy.$t('任务ID')" width="100" prop="jobName">
            <template #default="{ row }">
              {{ row.jobName }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('任务组')" width="150" prop="jobGroup" align="center">
            <template #default="{ row }">
              {{ row.jobGroup }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('触发器ID')" width="150" prop="triggerName" align="center">
            <template #default="{ row }">
              {{ row.triggerName }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('触发器组')" width="180" prop="triggerGroup" align="center">
            <template #default="{ row }">
              {{ row.triggerGroup }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('触发器状态')" prop="triggerStatus" width="150" align="center">
            <template #default="{ row }">
              {{ row.triggerStatus }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('开始时间')" prop="startTime" width="150" align="center">
            <template #default="{ row }">
              {{ row.startTime }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('结束时间')" prop="endTime" width="150" align="center">
            <template #default="{ row }">
              {{ row.endTime }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('Cron表达式')" prop="cronExpression" width="180" align="center">
            <template #default="{ row }">
              {{ row.cronExpression }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('失败策略')" prop="misfireInstruction" width="180" align="center">
            <template #default="{ row }">
              {{ row.misfireInstruction }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('任务描述')" prop="description" align="center" width="240">
            <template #default="{ row }">
              {{ row.description }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('操作')" align="center" width="100" fixed="right">
            <template #default="scope">
              <div>
                <el-button class="px-1" type="primary" size="small" text @click="handleTrigger(scope.row.jobName)"
                  :loading="loading" loading-icon="line-md:loading-loop">执行任务
                </el-button>

                <el-button class="px-1" type="primary" size="small" text @click="handlePause(scope.row.jobName)"
                  :loading="loading" loading-icon="line-md:loading-loop">暂停任务
                </el-button>

                <el-button class="px-1" type="primary" size="small" text @click="handleResume(scope.row.jobName)"
                  :loading="loading" loading-icon="line-md:loading-loop">恢复任务
                </el-button>

                <el-button class="px-1" type="primary" size="small" text @click="handleEdit(scope.row)" :loading="loading"
                  loading-icon="line-md:loading-loop">修改时间
                </el-button>

                <el-popconfirm title="是否要删除该任务？" confirmButtonText="确认" cancelButtonText="取消"
                  @confirm="handleDelete(scope.row.jobName)">
                  <template #reference>
                    <el-button class="px-1" text type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>


      <template v-if="showTable && selectedOption === 'Daily'">
        <el-table ref="multipleTableRef" :data="tableDailyData" stripe style="width: 100%" v-loading="loading">
          <el-table-column :label="proxy.$t('任务ID')" width="100" prop="jobName">
            <template #default="{ row }">
              {{ row.jobName }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('任务组')" width="150" prop="jobGroup" align="center">
            <template #default="{ row }">
              {{ row.jobGroup }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('触发器ID')" width="120" prop="triggerName">
            <template #default="{ row }">
              {{ row.triggerName }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('触发器组')" width="180" align="center" prop="triggerGroup">
            <template #default="{ row }">
              {{ row.triggerGroup }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('触发器状态')" prop="triggerStatus" width="150" align="center">
            <template #default="{ row }">
              {{ row.triggerStatus }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('开始时间')" prop="startTime" width="150" align="center">
            <template #default="{ row }">
              {{ row.startTime }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('执行频率')" prop="repeatInterval" width="200" align="center">
            <template #default="{ row }">
              {{ row.repeatInterval }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('时间单位')" prop="repeatIntervalUnit" width="100" align="center">
            <template #default="{ row }">
              {{ row.repeatIntervalUnit }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('任务描述')" prop="description" align="center" width="240">
            <template #default="{ row }">
              {{ row.description }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('操作')" align="center" width="100" fixed="right">
            <template #default="scope">
              <div>
                <el-button class="px-1" type="primary" size="small" text @click="handleTrigger(scope.row.jobName)"
                  :loading="loading" loading-icon="line-md:loading-loop">执行任务
                </el-button>

                <el-button class="px-1" type="primary" size="small" text @click="handlePause(scope.row.jobName)"
                  :loading="loading" loading-icon="line-md:loading-loop">暂停任务
                </el-button>

                <el-button class="px-1" type="primary" size="small" text @click="handleResume(scope.row.jobName)"
                  :loading="loading" loading-icon="line-md:loading-loop">恢复任务
                </el-button>

                <el-button class="px-1" type="primary" size="small" text @click="handleEdit(scope.row)" :loading="loading"
                  loading-icon="line-md:loading-loop">修改时间
                </el-button>

                <el-popconfirm title="是否要删除该任务？" confirmButtonText="确认" cancelButtonText="取消"
                  @confirm="handleDelete(scope.row.jobName)">
                  <template #reference>
                    <el-button class="px-1" text type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!--      任务图表-->
      <template v-if="showTable && selectedOption === 'Once'">
        <el-table ref="multipleTableRef" :data="tableOnceData" stripe style="width: 100%" v-loading="loading">
          <el-table-column :label="proxy.$t('任务ID')" width="100" prop="jobName">
            <template #default="{ row }">
              {{ row.jobName }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('任务组')" width="170" prop="jobGroup" align="center">
            <template #default="{ row }">
              {{ row.jobGroup }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('触发器ID')" width="170" prop="triggerName">
            <template #default="{ row }">
              {{ row.triggerName }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('触发器组')" width="180" align="center" prop="triggerGroup">
            <template #default="{ row }">
              {{ row.triggerGroup }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('触发器状态')" prop="triggerStatus" width="150" align="center">
            <template #default="{ row }">
              {{ row.triggerStatus }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('开始时间')" prop="startTime" width="150" align="center">
            <template #default="{ row }">
              {{ row.startTime }}
            </template>
          </el-table-column>
          <!--          <el-table-column :label="结束时间" prop="endTime" width="150" align="center">-->
          <!--            <template #default="{ row }">-->
          <!--              {{ row.endTime }}-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column :label="proxy.$t('任务描述')" prop="description" align="center" width="240">
            <template #default="{ row }">
              {{ row.description }}
            </template>
          </el-table-column>
          <el-table-column :label="proxy.$t('操作')" align="center" width="100" fixed="right">
            <template #default="scope">
              <div>
                <el-button class="px-1" type="primary" size="small" text @click="handleTrigger(scope.row.jobName)"
                  :loading="loading" loading-icon="line-md:loading-loop">执行任务
                </el-button>

                <el-button class="px-1" type="primary" size="small" text @click="handlePause(scope.row.jobName)"
                  :loading="loading" loading-icon="line-md:loading-loop">暂停任务
                </el-button>

                <el-button class="px-1" type="primary" size="small" text @click="handleResume(scope.row.jobName)"
                  :loading="loading" loading-icon="line-md:loading-loop">恢复任务
                </el-button>

                <el-button class="px-1" type="primary" size="small" text @click="handleEdit(scope.row)" :loading="loading"
                  loading-icon="line-md:loading-loop">修改时间
                </el-button>

                <el-popconfirm title="是否要删除该任务？" confirmButtonText="确认" cancelButtonText="取消"
                  @confirm="handleDelete(scope.row.jobName)">
                  <template #reference>
                    <el-button class="px-1" text type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template v-if="showTable && (selectedOption === 'Once' ||
        selectedOption === 'Daily') ||
        selectedOption === 'Cron'">
        <div v-show="false" class="flex items-center justify-center mt-5">
          <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
            :page-size="limit" @current-change="handlePageChange" />
        </div>
      </template>


      <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit" @cancel="handleCancel">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline=" false " style="overflow:hidden">
          <el-form-item :label=" 时间类型 " prop="menus">
            <el-radio-group v-model=" form.menus " class="w-full">
              <el-radio :label=" 0 " border>Cron类型</el-radio>
              <el-radio :label=" 1 " border>Daily类型</el-radio>
              <el-radio :label=" 2 " border>Once类型</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label=" 任务类型 " prop="jobType">
            <el-input v-model=" form.jobType " placeholder="请输入任务类型" style="width:70%;"></el-input>
          </el-form-item>

          <el-form-item :label=" 执行时间 " prop="start" v-if=" form.menus === 2 ">
            <el-date-picker v-model=" form.start " type="datetime" placeholder="请选择日期与时间" format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item :label=" 开始时间 " prop="startTime" v-if=" form.menus !== 2 ">
            <el-date-picker v-model=" form.startTime " type="date" placeholder="开始日期" style="width: 60%;"
              value-format="YYYY-MM-DD" />
          </el-form-item>

          <el-form-item :label=" 结束时间 " prop="endTime" v-if=" form.menus !== 2 ">
            <el-date-picker v-model=" form.endTime " type="date" placeholder="结束日期" style="width: 60%;"
              value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item :label=" 时间间隔 " prop="num">
            <el-row :gutter=" 24 ">
              <el-col :span=" 12 ">
                <el-input v-model=" form.num " placeholder="请输入一个数字"></el-input>
              </el-col>
              <!--          </el-form-item>-->
              <!--          <el-form-item :label="proxy.$t('时间单位')" prop="unit">-->
              <el-col :span=" 10 ">
                <el-select v-model=" form.unit " clearable placeholder="proxy.$t('时间单位')">
                  <el-option v-for=" item  in  select " :key=" item.id " :label=" item.name " :value=" item.id " />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item :label=" 任务描述 " prop="description">
            <el-input type="textarea" :rows=" 5 " v-model=" form.description " placeholder="请输入任务描述"></el-input>
          </el-form-item>
          <el-form-item :label=" Cron表达式 " prop="cron" v-if=" form.menus === 0 ">
            <el-input v-model=" form.cronExpression " placeholder="请输入Cron表达式，例如： '* * * * * ?'"
              style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item :label=" 失败策略 " prop="misfireInstruction" v-if=" form.menus === 0 ">
            <el-select v-model=" form.misfireInstruction " clearable placeholder="-1:补偿多次;1:仅补偿一次;2:不会补偿;默认为1">
              <el-option v-for=" item  in  selection " :key=" item.id " :label=" item.name " :value=" item.id " />
            </el-select>
          </el-form-item>
          <el-form-item :label=" 执行方式 " prop="expression" v-if=" form.menus === 1 ">
            <el-input v-model=" form.expression " style="width:100%;"
              placeholder="空格分隔的五个数字,如5 10 30 16 0,表示每天的10:30到每天的16:00,每隔5秒执行一次"></el-input>
          </el-form-item>
        </el-form>
      </FormDrawer>
    </el-card>
    <ExportNow ref="ExportNowRef" />
    <Banners ref="bannersRef" @reload-data=" initData " />

  </div>
</template>
<script setup>

import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
// import { onMounted } from 'vue'
// import ListHeader from '~/components/ListHeader.vue'
import FormDrawer from '~/components/FormDrawer.vue'
import Search from '~/components/Search.vue'
import SearchItem from '~/components/SearchItem.vue'
import Banners from './banners.vue'

import {
  getAllWorkData, deleteWorkData, resumeWorkData, pauseWorkData, triggerWorkData,
  addDailyData, addCronData, addOnceData
} from "~/api/task"
import { toast } from '~/composables/util'
// import {dayjs} from "element-plus";
import { Download, Refresh } from "@element-plus/icons-vue";
import ExportNow from "~/pages/goods/exportnow.vue";

const { proxy } = getCurrentInstance();
const formDrawerRef = ref(null)
let searchForm = reactive({
  jobGroupName: '',
})
const drawerTitle = "任务管理"

const form = reactive({
  menus: 0, // 用作判断任务类型
  jobName: null, //任务名称
  jobGroup: null, //任务分类
  jobType: "export", // 任务类型
  description: null, //任务描述
  triggerName: null, //触发器id
  triggerStatus: "NORMAL", //触发器状态
  triggerGroup: "default_trigger_group", //触发器组
  start: "",  //开始时间 yyyy-MM-dd HH:mm:ss
  startTime: "", //开始时间 yyyy-MM-dd
  endTime: "", //结束时间 yyyy-MM-dd
  num: null,
  unit: "",
  // Cron类型独享
  misfireInstruction: 1,//失败策略，-1:补偿多次;1:仅补偿一次;2:不会补偿;默认为1
  cronExpression: "", //cron表达式
  // Daily类型独享
  expression: "", //空格分隔的五个数字,如5 10 30 16 0,表示每天的10:30到每天的16:00,每隔5秒执行一次,
  repeatInterval: null,
  repeatIntervalUnit: "",
})

let selectedOption = 'Cron'
const jobTypes = reactive([{
  value: 'Cron',
  label: proxy.$t('Cron类型')
}, {
  value: 'Daily',
  label: proxy.$t('Daily类型')
}, {
  value: 'Once',
  label: proxy.$t('Once类型')
}
])

const select = reactive([{
  id: "mins",
  name: "分钟"
}, {
  id: "hours",
  name: "小时"
}, {
  id: "days",
  name: "天"
},
])
const selection = reactive([{
  "id": -1,
  "name": "补偿多次"
}, {
  "id": 1,
  "name": "仅补偿一次"
}, {
  "id": 2,
  "name": "不会补偿"
}
])

const rules = {
  expression: [{
    required: true,
    message: '表达式不能为空',
    trigger: 'blur',
  }, {
    pattern: /^\d+(\s\d+)*$/,
    message: '请输入格式匹配的表达式'
  }],
  jobTime: [{
    required: true,
    message: 'cron表达式不能为空',
    trigger: 'blur',
  }, {
    pattern: /^(\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?(,(\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?)* (\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?(,(\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?)* (\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?(,(\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?)* (\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?(,(\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?)* (\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?(,(\*|[0-9]{1,2}(-[0-9]{1,2})?)(\/[0-9]{1,2})?)*$/,
    message: '请输入格式匹配的表达式'
  }
  ],
}
// 导出控制
const ExportNowRef = ref(null)
const handleExportNow = () => ExportNowRef.value.open() // 触发侧栏打开


// 表单内时间选择（年与日+时分秒）
// const value2 = ref('');
// const pickerOptions = {
//   disabledDate(time) {
//     return time.getTime() > Date.now();
//   },
//   selectableRange: "00:00:00 - 23:59:59",
// };
//
// watch(value2, (newValue, _) => {
//   if (newValue) {
//     let today = dayjs();
//     let nowDate = today.format("HH:mm:ss");
//     let st;
//     if (today.format("YYYY-MM-DD") === dayjs(newValue).format("YYYY-MM-DD")) {
//       let hh1 = dayjs(newValue).format("HH:mm:ss")
//       if (hh1 > nowDate) {
//         value2.value = today;
//       }
//       st = nowDate;
//     } else {
//       st = "23:59:59";
//     }
//     pickerOptions.selectableRange = "00:00:00 - " + st;
//   }
//   return {
//     value2,
//     pickerOptions
//   }
// }, {deep: true, immediate: true});
// TODO: toSearch
const toSearch = (item) => console.log("todo", item)
// 重置搜索框
function resetSearchForm() {
  searchForm.jobGroup = "default_job_group"
  initData()
}

// 加载和数据表
const loading = ref(false)
const tableCronData = ref([])
const tableDailyData = ref([])
const tableOnceData = ref([])

// 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)


// 根据不同时间类型显示不同的表格数据
const showTable = ref(false)
const handleChange = (selectedOption) => {
  if (selectedOption === "Cron") {
    showTable.value = true
    getCronData()
  } else if (selectedOption === "Daily") {
    showTable.value = true
    getDailyData()
  } else if (selectedOption === "Once") {
    showTable.value = true
    getOnceData()
  } else {
    showTable.value = false
  }
}

const tableAllData = ref({
  /// 仅用于lint
  cronJobList: null,
  dailyJobList: null,
  simpleJobList: null,
})

function initData() {
  console.log('initData')
  loading.value = true
  getAllWorkData()
    .then(res => {
      console.log('initData', res);
      tableAllData.value = res.data
      getCronData()
      getOnceData()
      getDailyData()
    }).catch(err => {
      console.log('getAllData_err', err)
    }).finally(() => {
      loading.value = false
    })
}

// 获取Cron类型数据
function getCronData() {
  console.log('invoke getCronData');
  loading.value = true
  // getAllWorkData(mock_data.Mock_jobQuery)
  //   .then(res => {
  //     console.log('getCronData', res);
  tableCronData.value = tableAllData.value.cronJobList
  console.log('tabCronData', tableCronData.value);
  //   })
  //   .finally(() => {
  loading.value = false
  // })
}

// getCronData()

// 获取Daily类型数据
function getDailyData() {
  console.log('invoke getDailyData');
  loading.value = true
  // getAllWorkData(mock_data.Mock_jobQuery)
  //   .then(res => {
  //     console.log('getDailyData', res);
  tableDailyData.value = tableAllData.value.dailyJobList
  console.log('tabDailyData', tableDailyData.value);
  // })
  // .finally(() => {
  loading.value = false
  // })
}

// getDailyData()
// 获取Once类型数据
function getOnceData() {
  console.log('invoke getOnceData');
  loading.value = true
  // getAllWorkData(mock_data.Mock_jobQuery)
  //   .then(res => {
  //     console.log('getOnceData', res);
  tableOnceData.value = tableAllData.value.simpleJobList
  console.log('tabOnceData', tableOnceData.value);
  // })
  // .finally(() => {
  loading.value = false
  // })
}

// 修改时间
const bannersRef = ref(null)
const handleEdit = row => bannersRef.value.open(row)


// 表单部分
const formRef = ref(null)
// const defaultForm = tableAllData

// TODO:页表跳转
function handlePageChange() {
  console.log('TODO page change')
}

// 重置表单
// function resetForm() {
//   initData()
// }

// 新增
const handleCreate = () => {
  formDrawerRef.value.open()
}

// 提交表单，添加时间任务类型
const handleSubmit = () => {
  formDrawerRef.value.showLoading()
  const num = form.num
  const unit = form.unit
  const timeType = form.menus
  const _cronData = {
    cron: form.cronExpression,
    description: form.description,
    end: form.endTime,
    jobType: form.jobType,
    misfireInstruction: form.misfireInstruction,
    start: form.startTime
  }
  const _dailyData = {
    description: form.description,
    end: form.endTime,
    expression: form.expression,
    jobType: form.jobType,
    start: form.startTime
  }
  const _onceData = {
    description: form.description,
    jobType: form.jobType,
    start: form.start
  }
  if (timeType === 0) {
    console.log('cron_job', _cronData)
    protoAddJob(addCronData, _cronData, num, unit)
  } else if (timeType === 1) {
    console.log('daily_job', _dailyData)
    protoAddJob(addDailyData, _dailyData, num, unit)
  } else if (timeType === 2) {
    console.log('once_job', _onceData)
    protoAddJob(addOnceData, _onceData, num, unit)
  } else {
    toast('未知任务类型', 'error')
  }
}
function protoAddJob(addFn, ...args) {
  console.log('args', ...args);
  addFn(...args).then(() => {
    toast("提交成功")
    initData()
    formDrawerRef.value.close()
  }).catch(err => {
    console.log('error in once', err)
    toast(err.data.errMessage, 'error')
  }).finally(() => {
    formDrawerRef.value.hideLoading()
  })
}
const handleCancel = () => {
  for (let key in form) {
    if (Object.prototype.hasOwnProperty.call(form, key)) {
      form[key] = null;
    }
  }
  form.jobType = "export"; // 任务类型
  form.triggerStatus = "NORMAL"; //触发器状态
  form.triggerGroup = "default_trigger_group"; //触发器组
  formDrawerRef.value.close();
}

// 执行任务
const handleTrigger = (_jobName, _jobGroupName = "default_job_group") => {
  loading.value = true
  console.log('trigger', _jobName)
  const _combine = {
    jobName: _jobName,
    jobGroupName: _jobGroupName
  }
  protoHandleWork(triggerWorkData, _combine)
}
// handleTrigger()

//暂停任务
const handlePause = (_jobName, _jobGroupName = "default_job_group") => {
  loading.value = true
  console.log('pause', _jobName)
  const _combine = {
    jobName: _jobName,
    jobGroupName: _jobGroupName
  }
  console.log('pause_fin');
  protoHandleWork(pauseWorkData, _combine)
}
// handlePause()

// 恢复任务
const handleResume = (_jobName, _jobGroupName = "default_job_group") => {
  loading.value = true
  console.log('resume', _jobName);
  const _combine = {
    jobName: _jobName,
    jobGroupName: _jobGroupName
  }
  console.log('resume_fin');
  protoHandleWork(resumeWorkData, _combine)
}
// handleResume()

// 删除任务
const handleDelete = (_jobName, _jobGroupName = "default_job_group") => {
  loading.value = true
  console.log('delete', _jobName);
  const _combine = {
    jobName: _jobName,
    jobGroupName: _jobGroupName
  };
  console.log('delete_fin');
  protoHandleWork(deleteWorkData, _combine)
}
// handleDelete()

function protoHandleWork(workFn, ...args) {
  workFn(...args).then(() => {
    toast("删除成功")
    initData()
  }).catch(err => {
    console.log('error in resume', err)
    toast(err.data.errMessage, 'error')
  }).finally(() => {
    loading.value = false
  })
}

onMounted(() => {
  initData()
  handleChange('Cron')
})
</script>

<style scoped> .el-button+.el-button {
   margin-left: 0 !important;
 }
</style>